<template>
  <div class="second-comp">
    <el-card shadow="hover">
      <template #header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">销售额</el-menu-item>
          <el-menu-item index="2">访问量</el-menu-item>
        </el-menu>
        <div class="right">
          <el-radio-group v-model="radio">
            <el-radio-button label="今日"></el-radio-button>
            <el-radio-button label="本周"></el-radio-button>
            <el-radio-button label="本月"></el-radio-button>
            <el-radio-button label="今年"></el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-model="value"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
      </template>
      <div class="content">
        <div class="left-chart">
          <v-chart :option="option"></v-chart>
        </div>
        <div class="right-list">
          <div class="title">排行榜</div>
          <div class="list-item" v-for="item in list" :key="item.no">
            <span class="no" :class="{ 'top-3': item.no < 4 }">{{
              item.no
            }}</span>
            <span class="item-title">{{ item.title }}</span>
            <span class="sales">{{ item.sales }}</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
// 引入接口数据
import { getSaleData } from '../../api'
export default {
  data() {
    return {
      activeIndex: '1',
      radio: '今日',
      value: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      option: {},
      list: {},
    }
  },
  methods: {
    // 菜单切换
    handleSelect(index) {
      if (index === '1') {
        this.renderChart(
          this.saleData.saleFulleYearAxis,
          this.saleData.saleFulleYear
        )
        this.list = this.saleData.saleRank
      } else {
        this.renderChart(
          this.saleData.visitFullYeadAxis,
          this.saleData.visitFullYear
        )
        this.list = this.saleData.visitRank
      }
    },
    // 图表切换
    renderChart(data1, data2) {
      this.option = {
        title: {
          text: '年度销售额',
          fontSize: 14,
          fontWeight: 500,
        },
        xAxis: {
          type: 'category',
          data: data1,
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dotted',
            },
          },
        },
        grid: {
          left: 40,
        },
        series: [
          {
            type: 'bar',
            data: data2,
            barWidth: '40%',
            itemStyle: {
              color: 'skyblue',
            },
          },
        ],
      }
    },
  },
  async mounted() {
    const res = await getSaleData()
    this.saleData = res.data
    // 填充图表数据
    this.renderChart(
      this.saleData.saleFulleYearAxis,
      this.saleData.saleFulleYear
    )
    // 填充列表数据
    this.list = this.saleData.saleRank
  },
}
</script>

<style lang="scss" scoped>
.second-comp {
  margin-top: 20px;
  position: relative;
  .el-card {
    :deep(.el-card__header) {
      padding: 0;
      border-bottom: none;
    }
    .el-menu {
      padding-left: 50px;
    }
  }
  .right {
    position: absolute;
    right: 2%;
    top: 10px;
    .el-radio-group {
      margin-right: 20px;
    }
  }
  .content {
    display: flex;
    .left-chart {
      flex: 0 0 70%;
      height: 434px;
    }
    .right-list {
      flex: 1;
      .title {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 600;
      }
      .list-item {
        margin: 20px 0;
        display: flex;
        gap: 20px;
        .no {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          text-align: center;
          line-height: 20px;
          &.top-3 {
            background-color: #09b3f7;
            color: #fff;
          }
        }
        .item-title {
          flex: 1;
        }
      }
    }
  }
}
</style>
